<template>
  <div>
    <!-- tab start -->
    <div class="app-main-content-box tab-container">
      <el-tabs v-model="tabName">
        <el-tab-pane label="店铺管理" name="shop" />
        <el-tab-pane label="店铺服务" name="support" />
      </el-tabs>
    </div>
    <!-- tab end -->

    <!-- content start -->
    <div class="content-container">
      <!-- 门店管理 -->
      <ShopManage v-if="tabName==='shop'" />
      <!-- 服务管理 -->
      <SupportManage v-if="tabName==='support'" />
    </div>
    <!-- content end -->
  </div>
</template>

<script>
import ShopManage from './components/ShopManage'
import SupportManage from './components/SupportManage'
export default {
  components: {
    ShopManage,
    SupportManage
  },
  data() {
    return {
      // 配置
      // 状态
      // 数据
      tabName: 'shop'
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /**
       * 数据组
       */
    /**
       * 按钮组
       */
    /**
       * 状态组
       */
    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* tab */
  .tab-container ::v-deep {
    padding: 24px 30px 0;
    border-radius: 5px;
    .el-tabs__header {
      margin-bottom: 0;
      background-color: #fff;
      border-radius: 0 0 5px 5px;
    }
    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .el-tabs__active-bar {
      height: 4px;
    }
  }

  /* 内容 */
  .content-container {
    margin-top: 10px;
  }
</style>
